<template>
  <n-space
    vertical
    size="large"
    style="margin: 0px; height: 100%; width: 100%"
    content-style="padding: 0px; margin: 0px"
  >
    <n-layout
      style="padding: 0px; margin: 0px"
      content-style="padding: 0px; margin: 0px"
    >
      <n-data-table
        :columns="columns"
        :data="columnList"
        :style="{ height: `${innerHeight}px` }"
        flex-height
      />
    </n-layout>
  </n-space>
</template>

<script>
// @ is an alias to /src
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import useColumnRepositories from "../composables/useColumnRepositories";
import useWindowSize from "../composables/useWindowSize";
//import Constants from "../contants";
//import Constants from "../contants";

const createColumns = () => {
  return [
    {
      title: "列名",
      key: "columnName",
    },
    {
      title: "类型",
      key: "dataType",
    },
    {
      title: "描述",
      key: "columnComment",
    },
    {
      title: "主键",
      key: "columnKey",
    },
    {
      title: "空值",
      key: "nullable",
    },
  ];
};
export default {
  name: "Columns",
  components: {},
  setup() {
    //const height = ref(200);
    const router = useRouter();

    const linkId = ref(router.currentRoute.value.query.linkId);
    const tableId = ref(router.currentRoute.value.query.tableId);

    const { columnList, getColumnList } = useColumnRepositories(linkId.value);

    const { innerHeight } = useWindowSize();

    onMounted(() => getColumnList(tableId.value));

    return {
      innerHeight,
      columnList,
      columns: createColumns(),
    };
  },
};
</script>

<style lang="scss"></style>
